<template>
	<view class="transaction">
		<view class="top">
			<view class="top-tag">
				<u-icon name="bag" color="#1677ff"></u-icon>
				<text>{{list[ orderInfo.orderStatus-1]}}</text>
			</view>
			<view class="top-text">
				<text>{{orderInfo.consignee}}</text>
				<text>{{orderInfo.consigneePhone}}</text>
				<text>{{orderInfo.consigneeAddr}}</text>

			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>

		<view class="orderInfo">

			<image v-if="orderInfo.mainImage" style="width: 185rpx;height: 166rpx;margin-right: 15rpx;"
				:src="orderInfo.mainImage.includes('http') ? orderInfo.mainImage : baseUrl+orderInfo.mainImage "
				mode="">
			</image>
			<view v-else style="width: 185rpx;height: 166rpx;margin-right: 15rpx;"></view>
			<view class="info">
				<view class="infoname">
					<view class="tag">品牌</view>
					<view class="name">{{orderInfo.productName}}</view>
					<view v-if="orderInfo.deliveryMethod" class="mode">{{orderInfo.deliveryMethod}}</view>
					<!-- <view v-else class="mode">自取</view> -->
				</view>
				<view class="Specifications">规格：{{orderInfo.specifications}}</view>
				<view class="Specifications">数量：{{orderInfo.quantity}}</view>
				<view class="price">总租金：￥{{orderInfo.totalAmount}}</view>
			</view>
		</view>

		<view v-if="orderInfo.orderStatus != 8" class="operationButton">
			<view class="button" @click="setAddress()" v-if="orderInfo.orderStatus==1||orderInfo.orderStatus==2">修改地址
			</view>
			<view class="button buttonz" @click="" v-if="orderInfo.orderStatus==1">去支付</view>
			<view class="button" @click="after()" v-if="orderInfo.orderStatus==2">取消订单</view>
			<view class="button buttonz" @click="" v-if="orderInfo.orderStatus==2">申请退款</view>
			<view v-if="orderInfo.orderStatus>2&&orderInfo.orderStatus<5" class="buttonx button" @click="open(3)">提前归还
			</view>
			<view v-if="orderInfo.orderStatus>2&&orderInfo.orderStatus<5" class="buttony button" @click="open(4)">申请续租
			</view>
			<view v-if="orderInfo.orderStatus==5" class="buttonz button" @click="modalShow=true">撤销申请</view>
			<view v-if="orderInfo.orderStatus==9" class="buttonz button" @click="open(2)">逾期待付</view>
			<view v-if="calculateDaysDifference(orderInfo.endTime)==0" class="buttony button" @click="returnShow = true">回寄</view>
		</view>

		<!-- <view v-else class="operationButton">
			
		</view> -->

		<!-- <view class="rent" v-if="orderInfo.orderStatus>1">
			<view v-if="oddStr.includes('1')" class="rent-dsb">
				<text>快递单号</text>
				<view class="odd-right">
					<text>{{orderInfo.shippingNumberOut}}</text>
					<u-icon name="order"></u-icon>
				</view>
			</view>
			<view v-if="oddStr.includes('2')" class="rent-dsb">
				<text>回寄单号</text>
				<view class="odd-right">
					<text>{{orderInfo.shippingNumberBack}}</text>
					<u-icon name="order"></u-icon>
				</view>
			</view>
		</view> -->

		<view class="rent">
			<view class="rent-dsb">
				<text>租期</text>
				<text>共{{orderInfo.rentalPeriod}}天</text>
			</view>
			<view class="rent-dsb">
				<text>日租金</text>
				<text>￥{{ parseFloat(Number(orderInfo.totalAmount)/Number(orderInfo.rentalPeriod)).toFixed(2)}}/天</text>
			</view>
			<view class="rent-dsb" v-if="orderInfo.orderStatus>1&&orderInfo.orderStatus != 8">
				<text>租金付款方式</text>
				<text>{{orderInfo.paymentMethod}}</text>
			</view>
		</view>

		<view class="rent" v-if="orderInfo.orderStatus>1&&orderInfo.orderStatus != 8">
			<view class="rent-dsb">
				<text>订单号</text>
				<view class="odd-right">
					<text>{{orderInfo.orderNumber}}</text>
					<u-icon name="order"></u-icon>
				</view>
			</view>
			<view class="rent-dsb">
				<text>快递单号</text>
				<view class="odd-right">
					<text>{{orderInfo.shippingNumberOut}}</text>
					<u-icon name="order"></u-icon>
				</view>
			</view>
			<view class="rent-dsb">
				<text>下单时间</text>
				<text>{{orderInfo.orderTime}}</text>
			</view>
			<view v-if="rentStr.includes('2')" class="rent-dsb">
				<text>成交时间</text>
				<text>{{orderInfo.alipayNumber}}</text>
			</view>
			<view v-if="rentStr.includes('3')" class="rent-dsb">
				<text>开始时间</text>
				<text>{{orderInfo.startTime}}</text>
			</view>
			<view v-if="rentStr.includes('3')" class="rent-dsb">
				<text>截止时间</text>
				<text>{{orderInfo.endTime}}</text>
			</view>
			<view class="rent-dsb">
				<text>支付信息</text>
				<text>{{orderInfo.alipayNumber}}</text>
			</view>
		</view>

		<u-popup mode="bottom" :show="afterShow" :round="15" @close="afterClose">
			<view class="after">
				<view class="name">取消订单</view>
				<view class="orderInfo">
					<image style="width: 185rpx; height: 166rpx; margin-right: 10rpx"
						src="/static/userCenter/Frame 1321317247.png" mode=""></image>
					<view class="info">
						<view class="infoname">
							<view class="tag">品牌</view>
							<view class="name">{{orderInfo.productName}}</view>
						</view>
						<view class="Specifications">规格：{{orderInfo.specifications}}</view>
						<view class="Specifications">数量：{{orderInfo.quantity}}</view>
						<view class="price">总租金：￥{{orderInfo.totalAmount}}</view>
					</view>
				</view>

				<view class="cause">
					<text class="cause-text">请选择取消原因</text>

					<view class="radio-group">
						<view v-for="(item, index) in options" :key="index" class="radio-item"
							:class="{ active: selectedValue === item.value }" @click="selectItem(item.value)">
							<view class="radio-circle">
								<view v-if="selectedValue === item.value" class="checkmark"></view>
							</view>
							<text class="radio-text">{{ item.text }}</text>
						</view>
					</view>
				</view>

				<view class="radio-button">
					<button @click="afterClose()">暂不取消</button>
					<button style="background-color: #ebf3ff; color: #1677ff; margin-left: 20rpx"
						@click="retShow()">确认取消</button>
				</view>
			</view>
		</u-popup>

		<u-popup mode="center" :show="returnShow" :round="15" @close="returnClose">
			<view class="return">
				<view class="name">回寄地址</view>
				<view style="color: red; font-size: 24rpx; margin-bottom: 20rpx">*请将商品寄送到以下地址</view>
				<view class="orderInfo">
					<image style="width: 185rpx; height: 166rpx; margin-right: 10rpx"
						src="/static/userCenter/Frame 1321317247.png" mode=""></image>
					<view class="info">
						<view class="infoname">
							<view class="tag">品牌</view>
							<view class="name">{{orderInfo.productName}}</view>
						</view>
						<view class="Specifications">规格：{{orderInfo.specifications}}</view>
						<view class="Specifications">数量：{{orderInfo.quantity}}</view>
						<view class="price">总租金：￥{{orderInfo.totalAmount}}</view>
					</view>
				</view>

				<!-- 收件人信息 -->
				<view class="recipient-info">
					<view style="display: flex">
						<u-icon name="map" style="margin-left: 10rpx"></u-icon>
						<text class="info-name">张三</text>
					</view>
					<text>13245638769</text>
					<text class="info-value">上海市黄浦区花园小区</text>
				</view>

				<!-- 物流信息 -->

				<view class="input-group">
					<text class="input-label">物流单号：</text>
					<u-input v-model="trackingNumber" placeholder="请粘贴运输物流单号" placeholder-color="#999999"></u-input>
				</view>

				<view class="radio-button" style="margin-top: 30rpx">
					<button @click="returnClose()">取消</button>
					<button style="background-color: #ebf3ff; color: #1677ff; margin-left: 20rpx">确认</button>
				</view>
			</view>
		</u-popup>
		<!-- </u-popup> -->
		<u-popup mode="bottom" :show="addressShow" :round="15">
			<view>
				<view class="addressContent">
					<addRess></addRess>
					<view class="radio-button1">
						<button @click="addressClose()">取消</button>
						<button style="background-color: #1677ff; color: #ebf3ff; margin-left: 20rpx">确认</button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show" :round="10" mode="bottom" @close="show=false" @open="open">
			<view class="popup">
				<view class="title">{{title}}</view>
				<view class="orderInfo">
					<image style="width: 185rpx;height: 166rpx;" src="/static/userCenter/Frame 1321317247.png" mode="">
					</image>
					<view class="info">
						<view class="infoname">
							<view class="tag">品牌</view>
							<view class="name">{{orderInfo.productName}}</view>
						</view>
						<view class="Specifications">规格：{{orderInfo.specifications}}</view>
						<view class="Specifications">数量：{{orderInfo.quantity}}</view>
						<view class="price">总租金：￥{{orderInfo.totalAmount}}</view>
					</view>
				</view>
				<view class="content" v-if="title=='续租'">
					<view class="qandA">
						<text class="intro">实际到期时间：</text>
						<text class="answer">{{orderInfo.endTime}}</text>
					</view>
					<view class="qandA">
						<text class="intro">请选择续租天数：</text>
						<view class="answer">
							<text :class="choose==1?'active':'border'" @click="choose=1">1</text>
							<text :class="choose==7?'active':'border'" @click="choose=7">7</text>
							<text :class="choose==30?'active':'border'" @click="choose=30">30</text>
							<text :class="choose==365?'active':'border'" @click="choose=365">365</text>
							<text></text>
						</view>
					</view>
					<view class="qandA">
						<text class="intro">续租到期时间：</text>
						<text class="answer">{{addDaysToDate(orderInfo.endTime,choose)}}</text>
					</view>
					<view class="qandA">
						<text class="intro">续租所需金额：</text>
						<text class="price answer">
							￥{{(parseFloat(Number(orderInfo.totalAmount)/Number(orderInfo.rentalPeriod)).toFixed(2))*choose}}
						</text>
					</view>
					<view class="bottomButton">
						<view class="cancel" @click="show=false">取消订单</view>
						<view class="sure" @click="leaseOverdueFun()">确认支付</view>
					</view>
				</view>
				<view class="content" v-if="title=='逾期'">
					<view class="qandA" style="color:red;">
						<text class="intro">实际到期时间：</text>
						<text class="answer">2025-09-31 12:00:00</text>
					</view>
					<view class="qandA">
						<text class="intro">逾期天数：</text>
						<text class="price answer">6天</text>
					</view>
					<view class="qandA">
						<text class="intro">寄回物品单号：</text>
						<!-- @change="change" -->
						<u--input style="height: 62rpx;background-color: #f3f3f3;" border="none" placeholder="请粘贴运输物流单号"
							placeholderStyle="fontSize:28rpx,margin-left:10rpx" v-model="value"></u--input>
					</view>
					<view class="qandA">
						<text class="intro">预估需补金额：</text>
						<text class="price answer">￥39.99</text>
					</view>
					<view class="bottomButton">
						<view class="cancel">取消订单</view>
						<view class="sure" @click="leaseOverdueFun()">确认支付</view>
					</view>
				</view>
				<view class="content" v-if="title=='提前归还'">
					<view class="qandA" style="color:red;">
						<text class="intro">实际到期时间：</text>
						<text class="answer">{{orderInfo.endTime}}</text>
					</view>
					<view class="qandA">
						<text class="intro">预估退还金额：</text>
						<text class="price answer">￥{{estimatedRefundAmount(orderInfo.endTime)}}</text>
					</view>
					<view class="hint">注：提前归还须在审核通过三天内将租赁商品退回</view>
					<view class="bottomButton">
						<view class="sure" @click="">确认</view>
						<view class="think" @click="show=false">我在想想</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="modalShow"  :showCancelButton='true' @cancel="modalShow=false" @confirm="modalShow=false">
			是否撤销申请
		</u-modal>
	</view>
</template>

<script>
	import order from '@/api/order.js';
	import pageConfig from '@/config'
	import addRess from '../../components/address/index.vue';
	export default {
		data() {
			return {
				modalShow:false,
				list: ['待下单', '待发货', '待收货', '租用中', '审核中', '已逾期', '已完成', '已取消','已逾期'],
				baseUrl: pageConfig.baseUrl,
				choose: 1,
				value: '',
				show: false,
				title: '',
				orderInfo: {},
				//1回寄
				//2提前归还
				//3申请续租
				//4撤销申请
				//5已逾期
				//6逾期待付
				operationStr: '24', //表示需要显示的标签
				//订单号、下单时间、支付信息默认显示
				//1快递单号
				//2成交时间
				//3开始时间、截止时间
				rentStr: '3', //表示需要显示的详情
				//1快递单号
				//2回寄单号
				oddStr: '1',
				//默认自取，true为配送
				modeBool: false,
				//true 为已签收
				signBool: true,
				//售后弹窗
				afterShow: false,
				returnShow: false, //回寄地址弹窗
				addressShow: false, //修改地址弹窗
				trackingNumber: '', //物流单号
				selectedValue: '', // 当前选中值
				options: [{
						value: 'not_want',
						text: '不想要了'
					},
					{
						value: 'want_flow',
						text: '是想要了解流程'
					},
					{
						value: 'reorder',
						text: '想要重新下单'
					},
					{
						value: 'price',
						text: '商品价格较贵'
					},
					{
						value: 'wait',
						text: '等待时机较长'
					}
				]
			};
		},
		onLoad(option) {
			this.getorderInfo(option.id)
		},
		methods: {
			setTitle(newTitle) {
				// 调用支付宝小程序的 setNavigationBarTitle 方法
				my.setNavigationBar({
					title: newTitle
				});
			},
			getorderInfo(id) {
				order.leaseOrderInfo(id).then(res => {
					this.orderInfo = res.data
					this.setTitle(this.list[res.data.orderStatus - 1]);
				})
			},
			after() {
				this.afterShow = true;
			},
			afterClose() {
				this.afterShow = false;
			},
			selectItem(value) {
				this.selectedValue = value;
				this.$emit('change', value);
			},
			returnClose() {
				this.returnShow = false;
				this.addressShow = false;
			},
			retShow() {
				this.afterClose();
			},
			setAddress() {
				this.addressShow = true;
			},
			addressClose() {
				this.addressShow = false;
			},
			open(index) {
				switch (index) {
					case 4:
						this.show = true
						this.title = '续租'
						break;
					case 2:
						this.show = true
						this.title = '逾期'
						break;
					case 3:
						this.show = true
						this.title = '提前归还'
						break;
					default:
						break;
				}
			},
			estimatedRefundAmount(targetDateStr) {
				const parice = parseFloat(Number(this.orderInfo.totalAmount) / Number(this.orderInfo.rentalPeriod))
					.toFixed(2)
				return parice * this.calculateDaysDifference(targetDateStr)
			},
			//计算剩余日期
			calculateDaysDifference(targetDateStr) {
				// 获取当前日期和时间（去掉时间部分，只比较日期）
				const now = new Date();
				const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

				// 解析目标日期字符串
				const targetDate = new Date(targetDateStr);

				// 确保目标日期是有效的
				if (isNaN(targetDate.getTime())) {
					console.error('无效的日期格式');
					return 0;
				}

				// 计算时间差（毫秒）
				const timeDiff = targetDate - today;

				// 将毫秒转换为天数
				const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

				return daysDiff - 1;
			},
			//增加天数
			addDaysToDate(baseDateStr, daysToAdd) {
				// 解析基础日期字符串
				const baseDate = new Date(baseDateStr);

				// 确保基础日期是有效的
				if (isNaN(baseDate.getTime())) {
					console.error('无效的日期格式');
					return null;
				}

				// 增加天数（注意：Date对象会自动处理月份和年份的进位）
				baseDate.setDate(baseDate.getDate() + daysToAdd);

				// 格式化输出（可选）
				const year = baseDate.getFullYear();
				const month = String(baseDate.getMonth() + 1).padStart(2, '0');
				const day = String(baseDate.getDate()).padStart(2, '0');
				const hours = String(baseDate.getHours()).padStart(2, '0');
				const minutes = String(baseDate.getMinutes()).padStart(2, '0');
				const seconds = String(baseDate.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			leaseOverdueFun() {
				const params = {
					orderNumber: this.orderInfo.orderNumber,
					// goodsId: this.orderInfo.productSkuId,
					renewalDays: this.choose,
					// rentalDaysUnit: this.choose == 1 ? '天' : this.choose == 7 ? '周' : this.choose == 30 ? '月' : '年'
				}
				order.leaseRenewal(params).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '续租成功',
							icon: 'none', // 可选 success/loading/none
							duration: 2000 // 持续时间，单位ms
						});
						this.show = false
						setTimeout(() => {
							uni.navigateBack()
						})
					}
					console.log(res, 'res');
				})
			},
			leaseOverdueFun(){
				const params = {
					orderNumber: this.orderInfo.orderNumber,
					overdueDays: 1,
					overdueAmount: 15,
					overdueDeadline:'2025-05-30 15:48:00',
					shippingNumberBack:this.value
				}
				order.leaseOverdue(params).then(res => {
					console.log(res, 'res');
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none', // 可选 success/loading/none
							duration: 2000 // 持续时间，单位ms
						});
						this.show = false
						setTimeout(() => {
							uni.navigateBack()
						})
					}
				})
			}

		},
		components: {
			addRess
		}
	};
</script>

<style lang="scss" scoped>
	.addressContent {
		.radio-button1 {
			margin-top: 60rpx;
			display: flex;
			justify-content: space-evenly;

			button {
				width: 238rpx;
			}
		}
	}

	.addressContent {
		height: 800rpx;
		margin: 30rpx;
	}

	.transaction {
		height: 100vh;
		padding: 0 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			margin: 30rpx 0;

			.top-tag {
				display: flex;
				color: #1677ff;
				padding-right: 20rpx;
				border-right: 1px solid #aaa;
			}

			.top-text {
				width: 450rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 限制为两行 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.orderInfo {
			width: 100%;
			box-sizing: border-box;
			display: flex;

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}

			.infoname {
				display: flex;
				align-items: center;

				.tag {
					width: 64rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					color: #1677ff;
					background-color: #deecff;
					border-radius: 25px;
					font-size: 20rpx;
					margin-right: 8rpx;
				}

				.name {
					font-size: 28rpx;
				}

				.mode {
					width: 64rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					color: #ff8662;
					border: 1px solid #ff8662;
					border-radius: 3px;
					font-size: 20rpx;
					margin-left: 15rpx;
				}
			}

			.Specifications {
				color: #777;
				font-size: 24rpx;
			}

			.price {
				font-size: 24rpx;
			}
		}

		.operationButton {
			display: flex;
			justify-content: end;
			font-size: 26rpx;
			margin-top: 20rpx;

			.button {
				height: 50rpx;
				width: 130rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
				background-color: #e4e4e4;
			}

			.buttonx {
				color: #1677ff;
				background-color: #d9e9ff;
			}

			.buttony {
				color: #1677ff;
				background-color: #f1f5f6;
			}

			.buttonz {
				color: #ee5260;
				background-color: #fff1f2;
			}
		}

		.odd-right {
			display: flex;

			text {
				margin-right: 10rpx;
			}
		}

		.rent {
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			background-color: #f6faff;
			font-size: 28rpx;

			.rent-dsb {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 10rpx;
			}
		}

		.after {
			height: 800rpx;
			margin: 30rpx;

			.name {
				font-weight: bold;
				margin: 30rpx 0;
			}

			.radio-group {
				padding: 40rpx 0;
				background-color: #ffffff;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.radio-item {
					width: 45vw;
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;
					cursor: pointer;

					.radio-circle {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						border: 2rpx solid #cccccc;
						position: relative;
						margin-right: 20rpx;
					}

					.radio-circle.active {
						border-color: #4a90e2;
					}

					.checkmark {
						width: 20rpx;
						height: 20rpx;
						background-color: #4a90e2;
						border-radius: 50%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.radio-text {
					font-size: 30rpx;
					color: #333333;
				}

				/* 选中状态文字颜色 */
				.radio-item.active .radio-text {
					color: #4a90e2;
				}
			}
		}

		.return {
			height: 650rpx;
			width: 600rpx;
			margin: 30rpx;

			.name {
				font-weight: bold;
				margin: 30rpx 0 10rpx 0;
			}

			.recipient-info {
				display: flex;
				justify-content: space-between;
				background-color: #f6faff;
				padding: 15rpx 0;
				margin: 30rpx 0;
				font-size: 25rpx;

				.info-name {}

				.info-value {
					width: 300rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.input-group {
				background-color: #f8f8f8;
				padding: 20rpx;
				border-radius: 10rpx;

				.input-label {
					display: block;
					font-size: 30rpx;
					color: #666666;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.radio-button {
		display: flex;
		justify-content: center;

		button {
			width: 220rpx;
			height: 80rpx;
			font-weight: 600;
			line-height: 80rpx;
			background-color: #eaeaea;
			color: #aaaaaa;
			border-radius: 40rpx;
		}
	}

	.popup {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			padding: 25rpx 0;
		}

		.orderInfo {
			width: 100%;
			box-sizing: border-box;
			display: flex;

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}

			.infoname {
				display: flex;
				align-items: center;

				.tag {
					width: 64rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					color: #1677ff;
					background-color: #deecff;
					border-radius: 25px;
					font-size: 20rpx;
					margin-right: 8rpx;
				}

				.name {
					font-size: 28rpx;
				}
			}

			.Specifications {
				color: #777;
				font-size: 24rpx;
			}

			.price {
				font-size: 24rpx;
			}
		}

		.content {
			width: 100%;
			padding: 25rpx 0;

			.qandA {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				padding: 8rpx;
				box-sizing: border-box;

				.intro {
					width: 37%;
				}

				.answer {
					width: 61%;
					display: flex;
					justify-content: space-between;

					.border {
						color: #a0bde6;
						border: 1px solid #a0bde6;
						border-radius: 8rpx;
						padding: 0 19rpx;
					}

					.active {
						color: #1677ff;
						border: 1px solid #1677ff;
						border-radius: 8rpx;
						padding: 0 19rpx;
					}
				}

				.price {
					color: #ee5260;
					font-weight: 600;
				}

			}

			.hint {
				color: #ee5260;
				font-size: 24rpx;
				padding: 15rpx 0;
			}

			.bottomButton {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				font-size: 32rpx;

				.cancel {
					color: #b2b2b2;
					background-color: #eaeaea;
					border-radius: 25px;
					width: 180rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
				}

				.sure {
					color: #1677ff;
					border-radius: 25px;
					background-color: #ebf3ff;
					width: 180rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
				}

				.think {
					color: #1677ff;
					border-radius: 25px;
					border: 1px solid #1677ff;
					width: 180rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
				}

			}
		}
	}
</style>